<template>
  <div>
    <div class="banner">
      <HomeBanner></HomeBanner>
    </div>
    <div class="hotGoods">
      <TitleBar
        title="人气商品"
        sub-title="热门书籍"
        :cateId="1"
        more
      ></TitleBar>
      <div class="goodsList w">
        <div class="goods" v-for="item in 4" :key="item">
          <GoodsItem :goods-info="goodsInfo1"></GoodsItem>
        </div>
      </div>
    </div>
    <div class="onsaleGoods">
      <TitleBar
        title="活动特惠"
        sub-title="限时特价"
        :cateId="1"
        more
      ></TitleBar>
      <div class="goodsList w">
        <div class="goods" v-for="item in 4" :key="item">
          <GoodsItem :goods-info="goodsInfo2"></GoodsItem>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts" name="Home">
import HomeBanner from "./component/HomeBanner/index.vue";
import TitleBar from "./component/TitleBar/index.vue";
import GoodsItem from "@/components/GoodsItem/index.vue";
import { ref } from "vue";

const goodsInfo1 = ref({
  id: 0,
  src: "https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png",
  content:
    "钱钟书的《围城》这本书讲述的是20世纪30年代一群知识分子的故事，以从欧洲留学回国的青年方鸿渐为中心",
  price: "88.00",
});
const goodsInfo2 = ref({
  id: 0,
  src: "https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png",
  content:
    "钱钟书的《围城》这本书讲述的是20世纪30年代一群知识分子的故事，以从欧洲留学回国的青年方鸿渐为中心",
  price: "88.00",
  oldPrice: "99.00",
  onsale: true,
});
</script>

<style scoped lang="less">
.banner {
  background-color: #f1f1f1;
}
.goodsList {
  display: flex;
  flex-wrap: wrap;

  .goods {
    margin-right: 20px;
    margin-top: 20px;
  }
}
</style>
